<template>
  <div class="bottom_content">
    <img
      src="../../assets/icon/bottom_bg.png"
      alt=""
    >
    <div class="moduls_title">
      在岗人员信息
    </div>
    <div class="bottom_infs_box">
      <div class="bottom_infs_title">
        <div class="bottom_infs_title_name">
          姓名
        </div>
        <div class="bottom_infs_title_gender">
          性别
        </div>
        <div class="bottom_infs_title_idCard">
          证号
        </div>
        <div class="bottom_infs_title_type">
          作业类别
        </div>
        <div class="bottom_infs_title_project">
          操作项目
        </div>
      </div>
      <div class="bottom_infs_box_actions">
        <vue-seamless-scroll
          v-if="jsonData.length > 0"
          :data="jsonData"
          :class-option="optionHover"
          class="seamless-warp"
        >
          <div
            v-for="(item, index) in jsonData"
            :key="index"
            class="bottom_infs_item"
            :class="index % 2 == 0 ? 'active' : ''"
          >
            <div class="bottom_infs_item_name">
              {{ item.name }}
            </div>
            <div class="bottom_infs_item_gender">
              {{ item.gender }}
            </div>
            <div class="bottom_infs_item_idCard">
              {{ item.id_number }}
            </div>
            <div class="bottom_infs_item_type">
              {{ item.job_type }}
            </div>
            <div class="bottom_infs_item_project">
              {{ item.job_task }}
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
// import jsonData from '@/employeeInfo.json';
export default {
    data() {
        return {
            jsonData: [],
        };
    },
    computed: {
        optionHover() {
            return {
                step: 0.08, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    mounted() {
        this.$EventBus.$on('monitorId', (data) => {
            this.$axios.get(`/api/displayboard/employee/info?monitorId=${data}`).then(res => {
                if (res.code != 200) return
                this.jsonData = res.data
            })
        })
    },
    methods: {
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kuaikanshijieti';
    src: url('../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

.bottom_content {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 1%;
    padding-bottom: 0;

    img {
        width: 100%;
    }

    .moduls_title {
        width: 40%;
        position: absolute;
        top: 2.5%;
        left: 30%;
        text-align: center;
        font-family: kuaikanshijieti;
        font-size: 3.5rem;
        font-weight: 400;
        letter-spacing: .2rem;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: top;
    }

    .bottom_infs_box {
        width: 99%;
        height: auto;
        position: absolute;
        top: 10%;

        .bottom_infs_title {
            width: 98%;
            display: flex;
            align-items: center;
            justify-content: space-between;


            &_name,
            &_gender,
            &_idCard,
            &_type,
            &_project {
                height: 50px;
                line-height: 50px;
                font-size: 3rem;
                font-weight: 700;
                text-align: center;
                color: transparent;
                background-image: linear-gradient(180deg, rgba(247, 252, 255, 1) 0%, rgba(27, 241, 245, 1) 100%);
                -webkit-background-clip: text;
                background-clip: text;
            }

            &_name {
                width: 10%;
            }

            &_gender {
                width: 10%;
            }

            &_idCard {
                width: 30%;
            }

            &_type {
                width: 20%;
            }

            &_project {
                width: 30%;
            }
        }


        .bottom_infs_box_actions {
            width: 99%;
            height: 45rem;
            overflow-y: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            scrollbar-width: none;


            .bottom_infs_item {
                width: 98%;
                display: flex;
                align-items: center;
                justify-content: space-between;


                &_name,
                &_gender,
                &_idCard,
                &_type,
                &_project {
                    height: 70px;
                    line-height: 70px;
                    font-size: 2.5rem;
                    font-weight: 700;
                    text-align: center;
                    color: #fff;
                }

                &_name {
                    width: 10%;
                    // padding-left: 20px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &_gender {
                    width: 10%;
                }

                &_idCard {
                    width: 30%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &_type {
                    width: 20%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                &_project {
                    width: 30%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .active {
                background: linear-gradient(90deg, rgba(24, 107, 217, 0) 0%, rgba(0, 64, 148, 0.5) 50.07%, rgba(24, 107, 217, 0) 100%);
                border-top: 2px solid;
                border-bottom: 2px solid;
                border-image: linear-gradient(to right, rgba(24, 107, 217, 0), rgba(255, 255, 255, .5), rgba(24, 107, 217, 0)) 1;
            }
        }

    }
}



@media (max-width: 480px) and (max-height: 360px) {

    .bottom_content {

        .moduls_title {
            top: 3%;
            font-size: 1.2rem;
        }

        .bottom_infs_box {
            top: 10%;

            .bottom_infs_title {

                &_name,
                &_gender,
                &_idCard,
                &_type,
                &_project {
                    height: 2.8rem;
                    line-height: 2.8rem;
                    font-size: 1.2rem;
                }

                &_type {
                    width: 22%;
                }

                &_project {
                    width: 22%;
                }
            }


            .bottom_infs_box_actions {
                width: 99%;
                max-height: 20.5rem;
                overflow-y: auto;

                &::-webkit-scrollbar {
                    display: none;
                }

                scrollbar-width: none;

                .bottom_infs_item {

                    &_name,
                    &_gender,
                    &_idCard,
                    &_type,
                    &_project {
                        height: 3.5rem;
                        line-height: 3.5rem;
                        font-size: 1.6rem;
                    }

                    &_name {
                        width: 10%;
                        padding-left: 0;

                    }

                    &_type {
                        width: 22%;
                    }

                    &_project {
                        width: 22%;
                    }
                }

                .active {
                    border-top: 1px solid;
                    border-bottom: 1px solid;
                }
            }
        }
    }
}
</style>
